import React from 'react'
import Login from '../login/Login'
import { NavBar,Toast, Card } from 'antd-mobile'
import { LeftOutline, RightOutline  } from 'antd-mobile-icons'
import './my.scss'
import { useNavigate } from 'react-router-dom'
import DiZhi from '../../components/DiZhi'
import { useDispatch, useSelector } from 'react-redux'
import { saveUserId } from '../../store/userSlice'


export default function My() {
  let dispatch = useDispatch()
  let navigate = useNavigate()
  // 头部导航栏 -- 返回按钮
  const back = () =>{
    Toast.show({
      content: '点击了返回区域',
      duration: 1000,
    })
    navigate(-1)
  }
    const logOut = () => {
      localStorage.removeItem('token')
      dispatch(saveUserId(''))
      navigate('/login')
      console.log('退出');
    }

    const site = () =>{
      // Toast.show({
      //   content: '地址管理',
      //   duration: 1000,
      // })
      navigate('/DiZhi')
      console.log(111);
    }
   
    const order = () =>
    Toast.show({
      content: '订单中心',
      duration: 1000,
    })
    const Qy=(str)=>{
      return <div style={{display:'flex','justifyContent':"space-between",width:'315px'}}>
            <div>{str}</div><div><RightOutline /></div>
      </div>
    }
  return (
    <div className='my'>
      <div title='自定义返回按钮图标' padding='0'>
        <NavBar  back='返回'
        backArrow={<LeftOutline />} 
        style={{color:"#1989fa",height:'46px',borderBottom:'1px solid #ccc'}}
        onBack={back} >
          
          <div className='geRen'>
            <span style={{color:'#000'}}>个人中心</span>
            <span style={{marginRight:'30px'}} onClick={logOut}>退出</span>
          </div>
        </NavBar>
        <div className='personal'>
          <p>个人中心</p>
          <div className='card'>
            <NavBar backArrow={false}  back={Qy('地址管理')} onBack={site}></NavBar>
            <NavBar backArrow={false}  back={Qy('订单中心')}  onBack={order}></NavBar>
          </div>
        </div>
      </div>
    </div>
  )
}
